{% extends 'preheat/base.html' %}

{% block title %}创建手动预热任务 - CDN预热平台{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3>创建手动预热任务</h3>
        </div>
        <div class="card-body">
            <form method="post">
                {% csrf_token %}
                {% if form.errors %}
                <div class="alert alert-danger">
                    <strong>错误：</strong>
                    <ul>
                        {% for field in form %}
                            {% for error in field.errors %}
                                <li>{{ field.label }}: {{ error }}</li>
                            {% endfor %}
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                
                <!-- 任务名称 -->
                <div class="form-group">
                    <label for="{{ form.name.id_for_label }}">任务名称：</label>
                    {{ form.name }}
                </div>
                
                <!-- 任务描述 -->
                <div class="form-group">
                    <label for="{{ form.description.id_for_label }}">任务描述：</label>
                    {{ form.description }}
                </div>
                
                <!-- 按CDN域名筛选 -->
                <div class="form-group">
                    <label for="{{ form.cdn_domain_filter.id_for_label }}">{{ form.cdn_domain_filter.label }}：</label>
                    <select id="{{ form.cdn_domain_filter.id_for_label }}" name="{{ form.cdn_domain_filter.name }}" class="form-control">
                        <option value="">全部域名</option>
                        {% for domain, count in domains_with_count %}
                        <option value="{{ domain.id }}" {% if selected_domain and selected_domain.id == domain.id %}selected{% endif %}>
                            {{ domain.domain }} ({{ domain.get_vendor_display }}) - {{ count }}个地址
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- 请求地址选择区域 -->
                <div class="form-group">
                    <div class="d-flex justify-content-between items-center mb-2">
                        <label for="{{ form.request_urls.id_for_label }}">选择请求地址：</label>
                        {% if domains_with_count %}
                        <div class="btn-group btn-group-sm">
                            <button type="button" id="selectAllUrls" class="btn btn-outline-primary">全选</button>
                            <button type="button" id="deselectAllUrls" class="btn btn-outline-secondary">取消全选</button>
                        </div>
                        {% endif %}
                    </div>
                    {% if selected_domain %}
                    <div class="mb-2 text-sm text-info">
                        当前筛选：{{ selected_domain.domain }} ({{ selected_domain.get_vendor_display }}) - 共{{ domain_request_count }}个地址
                    </div>
                    {% endif %}
                    <div class="form-control" style="height: auto; min-height: 150px; overflow-y: auto;">
                        {{ form.request_urls }}
                    </div>
                </div>
                
                <!-- 服务器选择 -->
                <div class="form-group">
                    <div class="d-flex justify-content-between items-center mb-2">
                        <label for="{{ form.servers.id_for_label }}">选择执行服务器：</label>
                        <div class="btn-group btn-group-sm">
                            <button type="button" id="selectAllServers" class="btn btn-outline-primary">全选</button>
                            <button type="button" id="deselectAllServers" class="btn btn-outline-secondary">取消全选</button>
                        </div>
                    </div>
                    <div class="form-control" style="height: auto; min-height: 100px; overflow-y: auto;">
                        {{ form.servers }}
                    </div>
                </div>
                
                <!-- 提交按钮 -->
                <div class="d-flex gap-2 mt-4 pt-3 border-top">
                    <button type="submit" class="btn btn-primary">开始预热</button>
                    <a href="{% url 'preheat:home' %}" class="btn btn-secondary">取消</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 当CDN域名筛选器改变时，提交表单进行筛选
    $('#{{ form.cdn_domain_filter.id_for_label }}').change(function() {
        const cdnDomainId = $(this).val();
        // 构建新的URL，保留当前表单的其他参数
        const url = new URL(window.location.href);
        if (cdnDomainId) {
            url.searchParams.set('cdn_domain', cdnDomainId);
        } else {
            url.searchParams.delete('cdn_domain');
        }
        // 重新加载页面以应用筛选
        window.location.href = url.toString();
    });
    
    // 全选请求地址
    $('#selectAllUrls').click(function() {
        $('input[name="{{ form.request_urls.name }}"]').prop('checked', true);
    });
    
    // 取消全选请求地址
    $('#deselectAllUrls').click(function() {
        $('input[name="{{ form.request_urls.name }}"]').prop('checked', false);
    });
    
    // 全选服务器
    $('#selectAllServers').click(function() {
        $('input[name="{{ form.servers.name }}"]').prop('checked', true);
    });
    
    // 取消全选服务器
    $('#deselectAllServers').click(function() {
        $('input[name="{{ form.servers.name }}"]').prop('checked', false);
    });
});
</script>

<style>
    .form-group {
        margin-bottom: 20px;
    }
    
    /* 自定义复选框和单选框样式 */
    input[type="checkbox"], input[type="radio"] {
        margin-right: 5px;
    }
    
    /* 筛选区域样式 */
    .text-info {
        font-style: italic;
    }
    
    /* 按钮样式优化 */
    .btn-sm {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
    }
</style>
{% endblock %}